<template>
  <div class="onlineStudent">
    <div class="top">
      <div class="container-fluid">
        <div class="container">
          <el-row>
            <el-col :span="24">
              <div class="course-content">
                <div class="course-nav-box">
                  <div class="course-nav-row clearfix">
                    <div class="title">学科：</div>
                    <div class="content">
                      <ul>
                        <li
                          v-for="(item, index) in subjectList"
                          :class="{
                            'course-nav-active': filterType.subject == index,
                          }"
                          :key="index"
                          @click="subjectClick(index,item)"
                        >
                          {{ item.subject_name }}
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="course-nav-row clearfix">
                    <div class="title fl">授课方式：</div>
                    <div class="content">
                      <ul>
                        <li
                          v-for="(item, index) in lessonTypeList"
                          :class="{
                            'course-nav-active': filterType.lessonType == index,
                          }"
                          :key="index"
                          @click="shoukeClick(index,item)"
                         >
                          {{ item.name }}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row class="tabs-row">
            <el-col class="tabs-col" :span="6">
              <div class="tab-list">
                <div
                  class="tab-item"
                  v-for="(item, index) in tabList"
                  :class="{ 'tab-active': tabActive == item }"
                  :key="index"
                  @click="sortabClick(index,item)"
                >
                  {{ item }}
                </div>
              </div>
              <div class="search">
                <div class="input">
                  <img
                    src="../../assets/image/onlineStudent/search-ico.png"
                    alt=""
                  />
                  <input placeholder="请输入课程或老师" type="text" />
                </div>
                <div class="btn">搜索</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="container-fluid">
        <div class="container">
          <el-row>
            <el-col :span="24">
              <div class="lesson-list clearfix">
                <div
                  v-for="(item, index) in courseList"
                  :key="index"
                  @click="link(item.id,item.nature)"
                  class="lesson-card fl"
                >
                  <div class="lesson-img">
                    <img
                      v-bind:src= item.cover
                      alt=""
                    />
                  </div>
                  <div class="lesson-info">
                    <div class="info-title">{{ item.title}}</div>
                    <div class="play-type">
                      <div v-for="(m,index) in item.method">
                        <span :class=cPlayClass(m.method_id)>{{ m.method_name }}</span>
                      </div>
                    </div>
                    <div class="introduce">
                      <div class="info-buy">{{ item.buy_num }}人已购买</div>
                      <div class="info-price">￥<span>{{ item.sale_price }}</span></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pagination" id="pagination">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-size = addParam.pageSize
                  layout="prev, pager, next, jumper"
                  :total = totalCount
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  metaInfo: {
    title: 'My Example App', // set a title
    meta: [
      {
        // set meta
        name: 'keyWords',
        content: 'My Example App',
      },
    ],
  },
  created() {
    this.getCourseList();
    this.getSubjectList();
  },
  data() {
    return {
      addParam:{
        school_dns:	'xuexi.longde999.cn',
        sort:1,
        nature:0
      },
      courseList:[],
      subjectList: [
      ],
      lessonTypeList: [
        {name:"全部",value:''},
        {name:"直播",value:'1'},
        {name:"录播",value:'2'},
        {name:"其他",value:'3'},
      ],
      filterType: {
        subject: 0,
        lessonType: 0,
      },
      tabList: ["最新","最热","综合"],
      tabActive: '最新',
      skin:'',
      totalCount:0
    }
  },
  methods:{
    sortabClick(index,item){
      this.tabActive = item;
      this.addParam.sort = index+1;
      this.getCourseList();
    },
    shoukeClick(index,item){
      this.filterType.lessonType = index;
      this.addParam.method = item.value;
      this.getCourseList();
    },
    subjectClick(index,item){
      this.filterType.subject = index;
      this.addParam.parent = JSON.stringify([item.id]);
      this.getCourseList();
    },
      handleSizeChange(val) {
        this.addParam.pageSize = val;
        this.getCourseList();
      },
      handleCurrentChange(val) {
        this.addParam.page = val;
        this.getCourseList();
      },
      link(school_id,nature){
        this.$router.push({
          path:'/onlineStudent/lesson',
          query:{
            id:school_id,
            nature:nature
          }
        })
      },
      getCourseList(){
        this.$axios.post("/course/courseList", this.addParam).then(res => {
          if (res.code == 200) {
            this.courseList = res.data;
            this.totalCount = res.page.total;
            console.log(res)
          }
        });
      },
      getSubjectList() {
        this.$axios.post("/course/subjectList", this.addParam).then(res => {
          if (res.code == 200) {
            this.subjectList = res.data;
          }
        });
      },
      cPlayClass(i){
        switch (i) {
          case 1:
            return 'live';
          case 2:
            return 'video';
          case 3:
            return 'other';
        }
      },
  }
}
</script>
<style lang="less" scoped>
@import './common/index.less';
.onlineStudent {
  font-size: @baseSize;
  background-color: @courseNavBgColor;
}
.top {
  width: 100%;
  background: @courseNavBgColor;
}
.foot {
  background: #f8fafc;
}
.pagination {
  margin: 40px;
  text-align: center;
}
.course-content {
  background-color: @courseNavBgColor;
  .course-nav-row {
    position: relative;
    display: flex;
    padding: 16px 0;
    .title {
      min-width: 80px;
      color: #999999;
    }
    .content {
      ul {
        li {
           cursor: pointer;
          display: inline-block;
          margin-right: 20px;
          margin-bottom: 10px;
          padding: 3px 5px;
        }
      }
    }
  }
}
.lesson-list {
  // .flex();
  padding: 15px;
}
.lesson-card {
  cursor: pointer;
  margin-bottom: 15px;
  width: 255px;
  margin-right: 34px;
  border-radius: 4px;
  box-shadow: 0px 0px 13px 1px rgba(57, 57, 57, 0.05);
  .lesson-img {
    img {
      width: 255px;
      height: 155px;
    }
  }
  .lesson-info {
    background: @baseBgColor;
    padding: 15px 15px;
    .info-title {
      margin-bottom: 5px;
      font-size: 16px;
      color: #484848;
    }
    .play-type {
      .flex();
      margin-bottom: 10px;
      color: #ffffff;
      span {
        display: inline-block;
        margin-right: 5px;
        padding: 2px 5px;
        border-radius: 2px;
        font-size: 12px;
      }
      .live {
        background: #15c3bb;
      }
      .video {
        background: #45a0ff;
      }
      .other{
        background: #ee9900;
      }
    }
    .introduce {
      .flex(space-between, center);
      font-size: 12px;
      color: #979797;
      .info-price {
        color: #fd6f21;
        span {
          font-size: 24px;
        }
      }
    }
  }
}
.tabs-row {
  display: flex;
  justify-content: center;
  background: @baseBgColor;
  .tab-list {
    display: flex;
    font-size: 18px;
    color: #a3a3a3;
    .tab-item {
      padding: 11px 5px;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}
.tabs-col {
  position: relative;
  display: flex;
  .search {
    position: absolute;
    top: 10px;
    left: 300px;
    // width: 120px;
    display: flex;
    font-size: 12px;
    .input {
      display: flex;
      align-items: center;
      padding: 5px;
      background: rgba(250, 250, 250, 1);
      border: 1px solid rgba(238, 238, 238, 1);
      border-radius: 1px;
      img {
        width: 12px;
        height: 12px;
      }
    }
    .btn {
      cursor: pointer;
      width: 30px;
      padding: 5px 9px;
      background: #27a4fe;
      color: #ffffff;
    }
    input::placeholder {
      padding-left: 20px;
      font-size: 12px;
      color: #bbbbbb;
    }
  }
}
</style>
<style>
.onlineStudent .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
